<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JSX插值表达式</title>
		<style>
			/* table, */
			table tr th,
			table tr td{
				border: solid 1px #ddd;
			}
		</style>
	</head>
	<body>
		<div id="app"></div>
		
		<script src="./js/react17.development.js"></script>
		<script src="./js/react-dom17.development.js"></script>
		<script src="./js/babel.min.js"></script>
		<script type="text/babel">
			// 模拟数据
			let jobs = [
				{id: 1, name: "需求工程师"},
				{id: 2, name: "开发工程师"},
				{id: 3, name: "UI工程师"},
				{id: 4, name: "前端工程师"},
				{id: 5, name: "测试工程师"},
				{id: 6, name: "运维工程师"}
			]
			
			// JSX列表渲染
			let table = <table cellPadding="10" cellSpacing="0" width="80%">
							<tr>
								<th>编号</th>
								<th>名称</th>
								<th>操作</th>
							</tr>
							{/* 通过数组map()函数进行转换操作 */}
							{
								jobs.map( item => (
									<tr>
										<td>{ item.id }</td>
										<td>{ item.name }</td>
										<td>
											<button>编辑</button>
											<button>删除</button>
										</td>
									</tr>))
							}
							{/*
								jobs.map( item => {
									return <tr>
										<td>{ item.id }</td>
										<td>{ item.name }</td>
										<td>
											<button>编辑</button>
											<button>删除</button>
										</td>
									</tr>
								})
							*/}
							
						</table>
			
			// 渲染展示
			ReactDOM.render(table, document.querySelector("#app"))
			
		</script>
	</body>
</html>